<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>{% block title %}{% endblock %}</title>
  {% load bootstrap3 %}
  <link href="{% bootstrap_css_url %}" rel="stylesheet">
  <script src="{% bootstrap_jquery_url %}"></script>
  <script src="{% bootstrap_javascript_url %}"></script>
  {% block link_or_script %}{% endblock %}

  <style type='text/css'>
    html {
      position: relative;
      min-height: 100%;
    }
    body {
      padding-top: 50px;
    }
    .jumbotron {
      background-color: #ffffff;
    }
    .footer {
      position: absolute;
      bottom: 0;
      width: 100%;
    }
    .footer > .hr {
      background-color: #dddddd;
      color: #dddddd;
    }
    .panel-default {
      padding-top: 30px;
      border-color: #ffffff;
    }
    .panel-default > .panel-heading {
      background-color: #ffffff;
      border-bottom-color: #aaaaaa;
    }
    .panel-default > .panel-heading > h3 {
      padding-top: 0;
      line-height: 0;
      color: #428bca;
    }
    .list-group > p, .list-group > a {
      border-color: #ffffff;
    }
    .page-header {
      margin-top: 30px;
      margin-bottom: 10px;
      padding-top: 10px;
      color: #428bca;
      border-bottom-color: #aaaaaa;
    }
    .btn-default {
      border-color: #428bca;
      color: #428bca;
    }
    .modal-footer > .btn-default {
      color: #333333;
      border-color: #cccccc;
    }
  </style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">{{ username }}</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li {% block nav_home %} {% endblock %}><a href="{% url 'blog:home' username %}">Home</a></li>
        <li {% block nav_blog %} {% endblock %}><a href="{% url 'blog:blog' username %}">Blog</a></li>
        <li {% block nav_photo %} {% endblock %}><a href="#">Photos</a></li>
        <li {% block nav_me %} {% endblock %}><a href="#">About</a></li>
      </ul>
      <div class="navbar-right">
        <p class="navbar-text">Show me the Code, Change the World.</p>
      </div>
    </div>
  </div>
</div>

{% block jumbotron %}{% endblock %}

<div class="container">
  {% block carousel %}{% endblock %}
</div>

<div class="container">
  {% block content %}{% endblock %}
</div>
<br><br><br><br>

<div class="footer">
  <div class="hr"><hr></div>
  <div class="container">
    <p class="text-center"><a href="#">{% bootstrap_icon "arrow-up" %}Back to top</a></p>
    <p class="text-muted text-center">Copyright ©2014 All rights reserved. Powered by Silence.</p>
  </div>
</div>

{% block script %}{% endblock %}
</body>
</html>